<template>
  <div class="goods-details">
    <img src="@/assets/shipinxiangqing01.png" alt="">
    <div class="top">
      <p class="title">三阶魔方教程</p>
      <p class="tag" v-if="!is_collect" @click="collect">
        <img src="@/assets/shipinxiangqing02.png" alt="">
        <span>收藏</span>
      </p>
      <p class="tag" v-else @click="collect">
        <img src="@/assets/shipinxiangqing04.png" alt="">
        <span>收藏</span>
      </p>
      <div class="cons clear">
        <p class="price"><span>¥</span>99.00 <s>¥168.00</s></p>
        <p class="num">35.2万人已购买</p>
      </div>
      <div class="head flex" @click="router({path: './lecturerInfo'})">
        <img class="head-img" src="@/assets/jiangshijieshao02.png" alt="">
        <div class="head-name">
          <p class="name">王鹤讲师</p>
          <p class="belong">中国智慧宝资深讲师</p>
        </div>
        <p class="right">讲师详情 <img src="@/assets/querendingdan01.png" alt=""></p>
      </div>
    </div>
    <div class="tab-cons">
      <tab class="list-tab" 
        custom-bar-width="1.7rem"
        bar-active-color="#172F6D"
        >
        <tab-item selected @on-item-click="onItemClick">课程介绍</tab-item>
        <tab-item @on-item-click="onItemClick">课程目录</tab-item>
      </tab>
      <div class="info" v-if="!item_index">
        <p>魔方主要训练逻辑性、空间思维、空间想象、记忆力、高度注意力和左右手协调能力。是训练左右脑的最佳教育产品。</p>
        <p> 魔方是被评为20世纪最有影响力的发明之一，风靡世界，魔方也是智者的游戏。被称为：世界最有意义的教育产品。魔方不仅是益智产品，思维产品，也是一种文化。魔方能给孩子带来快乐，让孩子充满自信，珍惜时间，超越自己，还可以远离网游，做健康向上的孩子。</p>
        <img src="@/assets/shipinxiangqing07.png" alt="">
      </div>
      <div class="course-list" v-else>
        <div class="item" @click="item_toast">
          <span>1.三阶魔方初学基础入门</span>
          <img class="suo-img" src="@/assets/shipinxiangqing10.png" alt="">
        </div>
        <div class="item">
          <span>1.三阶魔方初学基础入门</span>
          <img class="suo-img" src="@/assets/shipinxiangqing10.png" alt="">
        </div>
        <div class="item">
          <span>1.三阶魔方初学基础入门</span>
          <img class="suo-img" src="@/assets/shipinxiangqing10.png" alt="">
        </div>
        <div class="item">
          <span>1.三阶魔方初学基础入门</span>
          <img class="suo-img" src="@/assets/shipinxiangqing10.png" alt="">
        </div>
      </div>
    </div>
    <div class="fixed" @click="router({path: './confirmOrder'})"><span class="btn">我要购买</span></div>
    <toast v-model="is_toast" type="text" width="20em">{{toast_con}}</toast>
  </div>
</template>

<script>

  import { Tab, TabItem, Toast } from 'vux'

  export default {
    components: {
      Tab,
      TabItem,
      Toast
    },
    data () {
      return {
        item_index: 0,
        toast_con: '默认',
        is_toast: false,
        is_collect: false,
      }
    },
    created () {
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
      onItemClick (index) {
        this.item_index = index
      },
      item_toast () {
        this.is_toast = !this.is_toast
        this.toast_con = '购买后才能收听哦'
      },
      collect () {
        this.is_toast = !this.is_toast
        this.is_collect = !this.is_collect
        if(this.is_collect){
          this.toast_con = '已收藏到“课程收藏”中'
        }else{
          this.toast_con = '已取消收藏'
        }        
      }
    }
  }
</script>

<style lang="stylus" scoped>
.goods-details
  min-height 100vh
  background-color #f5f5f5
  padding-bottom 5.5rem
  box-sizing border-box
  .top
    padding 1.5rem 0 1.5rem 1.5rem
    position relative
    background-color #fff
    margin-bottom 1rem
    .title
      font-size 1.9rem
      color #333
      font-weight bold
      width calc(100% - 10rem)
    .tag
      position absolute
      background-color #f0f0f0
      color #666
      text-align center
      font-size 1.3rem
      line-height 3rem
      font-weight 500
      width 7rem
      right 0
      top 1.5rem
      border-top-left-radius 100px
      border-bottom-left-radius 100px
      img
        width 1.5rem
        display inline-block
        vertical-align middle
      span
        display inline-block
        vertical-align middle
    .cons
      margin-top 1rem
      padding-bottom 1rem
      border-bottom 1px solid #e6e6e6
      .price
        float left
        font-size 1.7rem
        font-weight bold
        color #D03718
        span
          font-weight 400
          font-size 1.3rem
        s
          color #ccc
          font-size 1.3rem
          font-weight 400
          margin-left .5rem
      .num
        float right
        color #666
        font-size 1.2rem
        padding-right 1.5rem
        line-height 2.5rem
    .head
      display flex
      margin-top 1.5rem
      .head-img
        width 4rem
        height 4rem
        border-radius 50%
        overflow hidden
        margin-right 1rem
        max-width 4rem
      .head-name
        flex 1
        .name
          color #333
          font-weight bold
          font-size 1.3rem
          line-height 2rem
        .belong
          line-height 2rem
          font-size 1.2rem
          color #666
      .right
        line-height 4rem
        padding-right 3rem
        position relative
        img
          position absolute
          right 1.5rem
          width .6rem
          top 1.52rem
  .tab-cons  
    .list-tab
      padding-top 5rem
      .vux-tab-item.vux-tab-selected
        color #000
      .vux-tab-item
        color #999
        font-weight bold
        font-size 1.6rem
    .info
      text-indent 2em
      padding 0 1.75rem
      padding-top 2.2rem
      background-color #fff
      padding-bottom 2rem
      p
        font-size 1.2rem
        line-height 2.1rem
        color #666
        margin-bottom 2rem
    .course-list
      padding 0 1.5rem
      background-color #fff
      padding-bottom 2rem
      .item
        padding 1.5rem 0
        display flex
        border-bottom 1px solid #e6e6e6
        span
          flex 1
          font-size 1.5rem
          line-height 2.1rem
          color #333333
        .suo-img
          width 1.1rem
          max-width 1.1rem
          height 1.3rem
          margin-left 5.4rem
          position relative
          top .4rem
  .fixed
    background-color #fff
    padding .75rem 1.5rem
    position fixed
    bottom 0
    height 5.5rem
    width 100%
    box-sizing border-box
    box-shadow 1px 3px 7px rgba(0,0,0,.2)
    .btn
      line-height 4rem
      height 4rem
      width 100%
      background-color #172F6D
      color #fff
      font-size 1.5rem
      font-weight 500
      display block
      text-align center
      border-radius 100px
</style>
